import { Button, Space, Table } from "antd"
import dayjs from "dayjs"
import { shallowEqual, useSelector } from "react-redux"
import { NavLink } from "react-router-dom"
import EventBus from "../../util/event"
import {
    change_list,
    getProjectListAsync,
    select_project_list_data,
    select_project_list_loading,
    set_current_page,
    set_project_modal,
} from "../../redux/slice/project"
import axios from "../../util/http"
import { Pagination } from "antd"
import { useDispatch } from "react-redux"
import { useEffect } from "react"

function ProjectTable() {
    const dispatch = useDispatch()
    // 性能优化点：传入 shallowEqual ，与当前组件使用的数据进行对比，当state 变化时，才会重新渲染组件
    let data = useSelector(select_project_list_data, shallowEqual)
    const loading = useSelector(select_project_list_loading)
    // 应该render几次？
    // 2
    // redux发起action的时候会发布
    // useSelector订阅redux中的数据
    // 每次发布之后，useSelector都会执行，然后和上一次的数据进行===对比，如果不一致就更新
    // let data = useSelector(select_project_list_data)

    useEffect(() => {
        dispatch(getProjectListAsync())
    }, [])

    const columns = [
        {
            title: "收藏",
            dataIndex: "collect",
            key: "collect",
            render: (text, record) => {
                return (
                    <div
                        onClick={() => {
                            hand_collect_click(record)
                        }}
                        className="iconfont icon-shoucang shoucang-item"
                        style={{ color: text ? "#dfd50c" : "" }}
                    ></div>
                )
            },
            width: "10%",
        },
        {
            title: "项目名称",
            dataIndex: "name",
            key: "name",
            render: (text, data) => {
                return (
                    <NavLink to={`/project/${data._id}/kanban`}>{text}</NavLink>
                )
            },
            sorter: (a, b) => a.title - b.title,
            width: "30%",
        },
        {
            title: "部门",
            dataIndex: "organization",
            key: "organization",
            width: "15%",
        },
        {
            title: "负责人",
            dataIndex: "owner",
            key: "owner",
            render: (text) => <div>{text}</div>,
            width: "15%",
        },
        {
            title: "创建时间",
            key: "created",
            dataIndex: "created",
            render: (_, record) => (
                <Space size="middle">
                    <div>{dayjs(record.created).format("DD/MM/YYYY")}</div>
                </Space>
            ),
        },
        {
            title: "操作",
            key: "created",
            dataIndex: "created",
            render: (_, record) => (
                <>
                    <Button
                        type="primary"
                        onClick={() => {
                            edit_click(record._id)
                        }}
                    >
                        编辑
                    </Button>
                    <Button
                        type="danger"
                        onClick={() => {
                            del_click(record._id)
                        }}
                    >
                        删除
                    </Button>
                </>
            ),
        },
    ]

    // 收藏项目
    function hand_collect_click(record) {
        const data = {
            ...record,
            collect: !record.collect,
        }
        dispatch(
            change_list({
                _id: record._id,
                data,
            })
        )
        // 跟服务器同步
        axios.put(`/api/projects/${record._id}`, {
            collect: data.collect,
        })
    }

    function edit_click(id) {
        dispatch(
            set_project_modal({
                show: true,
                type: "edit",
                id,
            })
        )
    }

    // 删除project 后请求
    async function del_click(id) {
        await axios.delete(`/api/projects/${id}`)
        EventBus.emit("global_success_tips", "删除成功")
        dispatch(getProjectListAsync())
    }

    // 分页请求
    function onChange(page) {
        dispatch(set_current_page(page))
        dispatch(getProjectListAsync())
    }

    return (
        <>
            <Table
                rowKey="_id"
                className="project_table_css"
                loading={loading}
                pagination={false}
                dataSource={data.list}
                columns={columns}
            />
            <div className="project_pagination_bottom">
                <Pagination
                    onChange={onChange}
                    total={data.total}
                    current={data.current_page}
                />
            </div>
        </>
    )
}

export default ProjectTable
